(function () {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.querySelector(".bar2 .chart"));

    var data = [70, 34, 60, 78, 69];
    var titlename = ["HTML5", "CSS3", "javascript", "VUE", "NODE"];
    var valdata = [702, 350, 610, 793, 664];
    var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
    option = {
        //图标位置
        grid: {
            top: "10%",
            left: "22%",
            bottom: "10%"
        },
        xAxis: {
            show: false
        },
        yAxis: [ // y轴设置俩组数据，因为有俩组y轴数据 百分比和值
            {
                show: true,
                data: titlename,
                inverse: true,  // 类似css reverse 反转坐标
                axisLine: {
                    show: false
                },
                splitLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    color: "#fff",

                    rich: {
                        lg: {
                            backgroundColor: "#339911",
                            color: "#fff",
                            borderRadius: 15,
                            // padding: 5,
                            align: "center",
                            width: 15,
                            height: 15
                        }
                    }
                }
            },
            {
                show: true,
                inverse: true, // 类似css reverse 反转坐标
                data: valdata,
                axisLabel: {
                    textStyle: {
                        fontSize: 12,
                        color: "#fff"
                    }
                }
            }
        ],
        series: [
            {
                name: "条",
                type: "bar",
                yAxisIndex: 0,
                data: data,
                barCategoryGap: 50,
                barWidth: 10,
                itemStyle: {// 图形样式。
                    normal: {
                        barBorderRadius: 20,
                        color: function (params) {// 使用函数动态获取每个的颜色
                            console.log(params, '------');
                            // params.dataIndex会自动按顺序打印
                            var num = myColor.length;
                            return myColor[params.dataIndex % num];
                        }
                    }
                },
                label: { // label 可以在图形上显示文字
                    normal: {
                        show: true,
                        // 标签位置，将文字显示在bar里面
                        position: "inside",
                        //{c} 会自动解析成第一个对象data的数据
                        //{a} 系列名 name:条
                        //{b} 数据名 即另外一个轴的名字titlename
                        formatter: "{c}%"
                    }
                }
            },
            {
                name: "框",
                type: "bar",
                yAxisIndex: 1, // 类似css层叠，用于多个y轴，也就是yAxis有多个数组值的时候
                barCategoryGap: 50,
                data: [100, 100, 100, 100, 100], // data为固定值，因为充当框
                barWidth: 15,
                itemStyle: {
                    normal: {
                        color: "none",  // 不要颜色
                        borderColor: "#00c1de", // 选择边框颜色 这样形成了框
                        borderWidth: 3,
                        barBorderRadius: 15
                    }
                }
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.addEventListener("resize", function () {
        myChart.resize();
    });
})();


// 首先是定制俩个bar   一个为圆角充当里面的线条
// 一个充当框

// 百分比